<template>
	<view class="main">
		<view class="banner">
			<u-swiper :list="banner" height="500" mode="rect" indicator-pos="bottomLeft" border-radius="0"></u-swiper>
		</view>
		<view class="category">
			<view class="title">
				<text></text>品类展示<text></text>
			</view>
			<view class="text">
				CATEGORG DISPLAY
			</view>
		</view>
		<view class="list">
			<navigator :url="'/pages/sort/sort?id='+item.id+'&title='+item.title" class="li"
				v-for="(item,index) in list" :key="index">
				<image :src="item.image" mode="aspectFill" class="bg"></image>
				<view class="info">
					<image :src="item.icon" mode="aspectFit"></image>
					<view class="title">
						{{item.title}}
					</view>
					<text> {{item.desc}}</text>
					<view class="link">
						<image src="/static/icon/right.png" mode="aspectFit"></image>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				banner: [],
				list: [],
			}
		},
		onShow() {
			this.handindex()
		},
		methods: {
			handindex() {
				global.$http.request({
					url: '/api/good/banner',
				}).then(res => {
					this.banner = res.data.data
				})
				global.$http.request({
					url: '/api/good/good_type',
				}).then(res => {
					this.list = res.data.data
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;

		.main {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.banner {
				width: 750rpx;
				height: 500rpx;
			}

			.category {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 30rpx 0;

				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 30rpx;
					color: #24282f;
					width: 710rpx;

					text {
						width: 270rpx;
						height: 1rpx;
						background: #AEB2BB;
					}
				}

				.text {
					color: #384052;
					font-size: 16rpx;
					margin-top: 10rpx;
				}
			}

			.list {
				width: 710rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.li {
					width: 345rpx;
					height: 345rpx;
					position: relative;
					margin-bottom: 20rpx;

					.bg {
						width: 345rpx;
						height: 345rpx;
					}

					.info {
						position: absolute;
						left: 0;
						top: 0;
						color: #fff;
						padding: 30rpx;
						width: 100%;
						width: 345rpx;
						height: 345rpx;

						image {
							width: 58rpx;
							height: 58rpx;
						}

						.title {
							font-size: 30rpx;
							margin-top: 25rpx;
						}

						text {
							font-size: 20rpx;
						}

						.link {
							width: 100%;
							text-align: right;
							position: absolute;
							right: 30rpx;
							bottom: 30rpx;
						}
					}
				}
			}
		}
	}
</style>